<template>
  <div class="comment">
    <el-card>
      <div slot="header">
        评论管理
      </div>
      <el-table :data="list">
        <el-table-column label="标题" prop="title"></el-table-column>
        <el-table-column label="总评论数" prop="total_comment_count"></el-table-column>
        <el-table-column label="粉丝评论数" prop="fans_comment_count"></el-table-column>
        <el-table-column label="状态">
          <template v-slot="scope">{{scope.row.comment_status?'正常':'关闭'}}</template>
        </el-table-column>
        <el-table-column label="操作" width="120px">
          <template v-slot='scope'>
            <el-button @click="toggleStatus(scope.row)" type="danger" v-if="scope.row.comment_status" size="small">关闭评论</el-button>
            <el-button @click="toggleStatus(scope.row)" type="success" v-else size="small">打开评论</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="margin-top:20px" background layout="prev, pager, next" :total="total" :current-page="filterParams.page" :page-size="filterParams.per_page" @current-change="changePager"></el-pagination>
    </el-card>
  </div>
</template>
<script>
import { loadCommentList, toggleStatus } from '@/api/comment.js'
export default {
  data () {
    return {
      // 查询参数
      filterParams: {
        page: 1,
        per_page: 20,
        response_type: 'comment'
      },
      // 评论列表
      list: [],
      total: 0
    }
  },
  methods: {
    // 切换状态
    async toggleStatus (row) {
      try {
        await toggleStatus({
          allow_comment: !row.comment_status
        }, {
          article_id: row.id.toString()
        })
        // 修改页码状态
        row.comment_status = !row.comment_status
      } catch (error) {
        console.log(error)
        this.$message.error('切换评论状态失败')
      }
    },
    // 改变页码
    async changePager (newPage) {
      this.filterParams.page = newPage
      this.loadCommentList()
    },
    // 获取评论列表
    async loadCommentList () {
      try {
        const ret = await loadCommentList(this.filterParams)
        // console.log(ret)
        this.list = ret.data.results
        this.total = ret.data.total_count
      } catch (error) {
        console.log(error)
      }
    }
  },
  created () {
    this.loadCommentList()
  }
}
</script>
